<template>
  <view class="bottom_box">
    <button
      :class="['btn ml-32rpx mt-18rpx', disabled ? 'disabled-color' : '']"
      :disabled="disabled"
      @click="clickBtn"
    >
      <slot></slot>
    </button>
  </view>
</template>
<script setup>

const props = defineProps({
  disabled: { type: Boolean, default: false },
});
const emits = defineEmits(["clickBtn"]);
const clickBtn = (e) => {
  emits("clickBtn", e);
};
</script>
<style lang="scss">
.bottom_box {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  @include safeAreaBottom(40rpx);
  z-index: 98;
  .btn {
    width: 686rpx;
    height: 98rpx;
    background: $uni-color-primary;
    line-height: 98rpx;
    border: 0;
    border-radius: 49rpx;
    font-size: 36rpx;
    font-weight: 400;
    color: #ffffff !important;
    &::after {
      display: none;
    }
  }
  .disabled-color {
    background: #cacaca !important;
  }
}
</style>
